<template>
	<div id="userLayout" class="user-layout-wrapper">
		<div class="container" :class="{'official':isPro}"><router-view /></div>
	</div>
</template>

<script>
// import defaultSettings from '@/config/defaultSettings';
import { mapState } from 'vuex';
export default {
	name: 'UserLayout',
	data() {
		return {};
	},
	computed: {
		...mapState(['isPro']),
	},
	mounted() {
		document.body.classList.add('userLayout');
	},
	beforeDestroy() {
		document.body.classList.remove('userLayout');
	}
};
</script>

<style lang="less" scoped>
#userLayout.user-layout-wrapper {
	height: 100%;

	&.mobile {
		.container {
			.main {
				max-width: 368px;
				width: 98%;
			}
		}
	}

	.container {
		width: 100%;
		height: 100%;
		background: #fff url(/login.jpg) no-repeat left;
		background-size:cover;
		position: relative;
		a {
			text-decoration: none;
		}
		&.official{
			width: 100%;
			height: 100%;
			background: #fff url(/login_pro.jpg) no-repeat left;
			background-size:cover;
			position: relative;
		}
	}
}
</style>
